<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传照片</title>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta name="viewport"
          content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="app-mobile-web-app-capable" content="yes"/>
    <meta name="app-mobile-web-app-status-bar-style" content="black-translucent"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_772560_v9hv5gbz1wg.css">
    <link rel="stylesheet" href="css/upload-pics.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="upload" id="previewImg">
    <div class="upload-item upload-input" id="pics">
        <input type="file" name="file" id="picture" value="" accept="image/" multiple />
    </div>
</div>

<script src="js/plupload.min.js"></script>
<script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script>
<script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script>
<script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>
<script>
    let qiniuUrl = 'https://pimg.ec51.com/',token = '',id = sessionStorage.getItem('login_identifier'),pics = [],showPics = [],imgAll=[];
    $.ajax({
        url: 'https://qyim.ec51.com/v1/check/qiniu-token',
        async:false,
        success: res => {
            token = res.data
        }
    });
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "https://qyim.ec51.com/v1/check/personal-photo",
            data:{
                id:id,
            },
            success: res=> {
                showPics = res.data;
                if(showPics.length!=0){
                    var html = ''
                    for (var i = 0;i<showPics.length;i++){
                        html +='<div class="upload-item"><img src="'+showPics[i]+'" alt=""><i class="ra ra-shanchu" data-index="'+i+'"></i></div>'
                    }
                    $('#previewImg').append(html)
                }
            },
        })
    })
    function submitForm(){
        $.ajax({
            type: "POST",
            url: "https://qyim.ec51.com/v1/check/personal-photo",
            data:{
                id:id,
                personal_photo:showPics.concat(...pics),
            },
            success: function (data) {
            },
        })
    }
    //    七牛上传图片
    uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',
        browse_button: 'picture',//上传按钮的ID
        container: 'pics',//上传按钮的上级元素ID
        drop_element: 'btn-uploader',
        max_file_size: '100mb',//最大文件限制
        flash_swf_url: '/static/js/plupload/Moxie.swf',
        dragdrop: false,
        chunk_size: '4mb',//分块大小
        // uptoken_url: 'http://192.168.31.113/ec51/qyim/web/v1/member/qiniu-token',//设置请求qiniu-token的url
        //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        uptoken: token,
        //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
        // unique_names: true,
        // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
        // save_key: true,
        // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
        domain: qiniuUrl,//自己的七牛云存储空间域名
        multi_selection: true,//是否允许同时选择多文件
        //文件类型过滤，这里限制为图片类型
        filters: {},
        auto_start: true,
        init: {
            'FilesAdded': function (up, files) {
                //do something
            },
            'BeforeUpload': function (up, file) {
                //do something

            },
            'UploadProgress': function (up, file) {
                //可以在这里控制上传进度的显示
                //可参考七牛的例子
                $("body").append("<div class=\"loadingWrap\"></div>");
            },
            'UploadComplete': function () {
            },
            'FileUploaded': function (up, file, info) {
                var domain = up.getOption('domain');
                var res = eval('(' + info + ')');
                var sourceLink = domain + res.key;//获取上传文件的链接地址
                $('#previewImg').append('<div class="upload-item"><img src="'+sourceLink+'" alt="" data-index="'+showPics.length+1+'"><i class="ra ra-shanchu" ></i></div>')
                $(".loadingWrap").remove();
                pics.push(sourceLink);
                submitForm()
            },
            'Error': function (up, err, errTip) {
            },
            'Key': function (up, file) {
                //当save_key和unique_names设为false时，该方法将被调用
                var key = new Date().getTime() + Math.floor(Math.random() * 10);
                // do something with key here
                return key
            }
        }
    });
    $('#previewImg').on('click','.upload-item i',function () {
        var url = $(this).siblings('img').attr('src');
        $(this).parent('.upload-item').remove()
        $.ajax({
            type: "POST",
            url: "https://qyim.ec51.com/v1/check/del-photo",
            data:{
                id:id,
                url:url,
            },
            success: function (data) {
            },
        })
    })
</script>
</body>
</html>